<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem .5rem 0 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .shop-info {
            background: #F2F2F2;
            padding: .6rem
        }

        .pay-true {
            margin-top: 2rem;
            justify-content: flex-end
        }

        .pay-type-item {
            height: 3.8rem;
        }
        .pay-btn{
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          margin-bottom: .35rem;
          border-radius: 1rem;
          margin-top: 5.25rem
        }
    </style>
</head>

<body>
  <div id="app">
    <div id="dialog">
        <div class="modal-head">
            <div class="">
                此商品需要您到提货点自提
            </div>
            <img class="close-modal-img" src="../image/common/guanbi.png" alt="" tapmode onclick="api.closeFrame()">
        </div>
        <div class="modal-body">
            <div class="shop-info font-14 text-color-3">
                <div class="flex">
                    <span>店铺名称:</span>
                    <div class="font-semibold">万嘉便利店</div>
                </div>
                <div class="">
                    <span>提货地址:</span>
                    <div class="font-semibold" style="display:inline">
                        福建省福州市鼓楼区快安路128号名城港湾B块5#楼1层09店面
                    </div>
                </div>
                <div class="pay-true flex">
                    <span>实际支付:</span>
                    <div class='red-text font-12'>¥<span class="font-17">88</span></div>
                </div>
            </div>

            <div class="pay-type">
                <div class="flex-justify-between pay-type-item">
                    <div class="flex-align-center">
                        <img class='img-44' src="../image/order/weixin.png" alt="">
                        <span class="font-16">微信支付</span>
                    </div>
                    <input class="aui-radio" type="radio" name="demo" checked="">
                </div>
                <div class="flex-justify-between pay-type-item">
                    <div class="flex-align-center">
                        <img class='img-44' src="../image/order/shouyi.png" alt="">
                        <span class="font-16">收益支付</span>
                    </div>
                    <input class="aui-radio" type="radio" name="demo" checked="">
                </div>

            </div>

              <button class='pay-btn red-btn font-16' tapmode @click='payConfirm' >确认支付</button>
        </div>
    </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
              payConfirm: function() {
                  api.openFrame({
                      name: 'pay-modal',
                      url: './pay-modal.html',
                      bounces: true,
                      rect: {
                          x: 0,
                          y: 0,
                          w: api.winWidth,
                          h: api.winHeight
                      },
                      bgColor: 'rgba(0,0,0,0.6)',
                      bounces: false
                  })

              }
        }

    });
    $api.addCls(dialog, 'in');
    apiready = function() {
        // $(document.body).on('touchend', function(e) {
        //     var dialog = $("#dialog")[0];
        //     if (!$.contains(dialog, e.target)) {
        //         $('#dialog').removeClass('in');
        //         setTimeout(function() {
        //             api.closeFrame();
        //         }, 200);
        //     }
        // });
    };
</script>


</html>
